Redux Middleware এর মাধ্যমে Asynchronous Actions হ্যান্ডল করা

Redux-এ Asynchronous Actions (যেমন, API কল) হ্যান্ডল করার জন্য সাধারণত Middleware ব্যবহার করা হয়। Redux স্টোরের মধ্যে সব একশনই সিনক্রোনাস হয়, কিন্তু বাস্তব জীবনে অনেক সময় আমাদের অ্যাসিনক্রোনাস একশন (যেমন, ডেটা লোড, ফর্ম সাবমিট) পরিচালনা করতে হয়। Redux Middleware, বিশেষত Redux Thunk এবং Redux Saga, এই কাজগুলো সহজভাবে সম্পাদন করতে সহায়তা করে।

Middleware কী?

Middleware হল একটি ফাংশন যা Redux স্টোরের মধ্যে একশন ডিসপ্যাচ হওয়ার আগে অথবা পরে ইন্টারসেপ্ট করে। এটি একশনের উপর নির্দিষ্ট লজিক বা কার্যকারিতা প্রয়োগ করতে পারে, যেমন অ্যাসিনক্রোনাস কাজের জন্য একশন ক্রিয়েটরকে পরিবর্তন করা।

Asynchronous Actions এর সমস্যা

Redux-এ একশন শুধুমাত্র সিনক্রোনাস হতে পারে, কিন্তু অনেক সময় আমাদের API কল বা টাইম-আউট এর মতো অ্যাসিনক্রোনাস কাজ করতে হয়। এর জন্য Redux এর মধ্যে একশনগুলিকে ফাঁকি দেওয়ার প্রয়োজন হয়, যাতে তারা একসাথে স্টেট পরিবর্তন করতে পারে।

যেহেতু Redux স্টোরে শুধুমাত্র সাধারণ একশনই পৌঁছায়, সেজন্য অ্যাসিনক্রোনাস একশনগুলিকে বিশেষভাবে হ্যান্ডল করার জন্য Middleware ব্যবহৃত হয়।

Redux Thunk: Asynchronous Actions হ্যান্ডল করার জন্য

Redux Thunk হল একটি জনপ্রিয় Middleware যা অ্যাসিনক্রোনাস একশনগুলোকে Redux স্টোরে পাঠানোর জন্য ব্যবহৃত হয়। এটি আমাদের Action Creators-কে ফাংশন হিসেবে লিখতে সাহায্য করে, যাতে অ্যাসিনক্রোনাস কাজ করতে পারে।

Redux Thunk middleware একশন ডিসপ্যাচ করার জন্য একটি ফাংশনকে অনুমতি দেয়। এই ফাংশনটি dispatch এবং getState নামক দুটি আর্গুমেন্ট গ্রহণ করে। এর মাধ্যমে, আমরা অ্যাসিনক্রোনাস কাজগুলো পরিচালনা করতে পারি এবং তারপরে একশন ডিসপ্যাচ করতে পারি।

Redux Thunk ব্যবহার করার উদাহরণ

১. Redux Thunk ইন্সটল করা

প্রথমে, Redux Thunk ইন্সটল করতে হবে:

npm install redux-thunk

২. Middleware হিসেবে Thunk ব্যবহার করা

Redux store তৈরির সময় Thunk middleware যোগ করতে হয়:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

// Reducer
function rootReducer(state = { todos: [] }, action) {
  switch (action.type) {
    case 'FETCH_TODOS':
      return { ...state, todos: action.payload };
    default:
      return state;
  }
}

// Store তৈরি
const store = createStore(rootReducer, applyMiddleware(thunk));

এখানে, আমরা applyMiddleware(thunk) ব্যবহার করে Redux store-এ Thunk middleware যোগ করেছি।

৩. Action Creator with Thunk (Asynchronous Action)

এখন, আসুন দেখি কিভাবে অ্যাসিনক্রোনাস একশন ডিসপ্যাচ করা যায় Redux Thunk এর মাধ্যমে:

// Action creator with Thunk (Asynchronous action)
function fetchTodos() {
  return function(dispatch) {
    dispatch({ type: 'FETCH_TODOS_START' });

    fetch('/api/todos')  // API কল
      .then(response => response.json())
      .then(data => {
        dispatch({ type: 'FETCH_TODOS_SUCCESS', payload: data });
      })
      .catch(error => {
        dispatch({ type: 'FETCH_TODOS_FAILURE', payload: error });
      });
  };
}

এখানে:

• fetchTodos একটি Thunk action creator, যা একটি ফাংশন ফেরত দেয়।
• প্রথমে একটি FETCH_TODOS_START একশন ডিসপ্যাচ করা হয়, যেটি API কল শুরু হওয়ার সংকেত দেয়।
• তারপর, API কল করা হয় এবং সাফল্য বা ব্যর্থতার ভিত্তিতে যথাক্রমে FETCH_TODOS_SUCCESS বা FETCH_TODOS_FAILURE একশন ডিসপ্যাচ করা হয়।

৪. Dispatching Asynchronous Action

store.dispatch(fetchTodos());

এখন, আপনি যখন fetchTodos ফাংশনটি ডিসপ্যাচ করবেন, এটি API কল করবে এবং একশন ডিসপ্যাচ করবে।

Reducer তে Asynchronous Actions হ্যান্ডল করা

একশন ডিসপ্যাচ হওয়ার পর, রিডিউসার সেই একশনগুলিকে হ্যান্ডল করে স্টেট পরিবর্তন করবে।

function rootReducer(state = { todos: [], loading: false, error: null }, action) {
  switch (action.type) {
    case 'FETCH_TODOS_START':
      return { ...state, loading: true };
    case 'FETCH_TODOS_SUCCESS':
      return { ...state, loading: false, todos: action.payload };
    case 'FETCH_TODOS_FAILURE':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
}

এখানে:

• FETCH_TODOS_START: লোডিং স্টেট পরিবর্তন করে।
• FETCH_TODOS_SUCCESS: সফলভাবে ডেটা পাওয়ার পর, স্টেট আপডেট করে।
• FETCH_TODOS_FAILURE: যদি কোনো ত্রুটি ঘটে, তাহলে ত্রুটি স্টেট আপডেট করে।

Redux Saga: আরো শক্তিশালী Middleware

Redux Saga একটি শক্তিশালী Middleware যা অ্যাসিনক্রোনাস কাজগুলো সিজেন (Saga) ব্যবহার করে হ্যান্ডল করে। এটি থাঙ্কের চেয়ে আরও উন্নত এবং আরও জটিল অ্যাসিনক্রোনাস লজিক পরিচালনা করতে সক্ষম। তবে Redux Thunk ছোট অ্যাপ্লিকেশনে সাধারণত যথেষ্ট, এবং এটি আরও সহজ ব্যবহারযোগ্য।

সারাংশ

Redux Middleware বিশেষভাবে Redux Thunk অ্যাসিনক্রোনাস একশন হ্যান্ডল করার জন্য ব্যবহৃত হয়। Thunk, অ্যাসিনক্রোনাস কাজের জন্য action creators কে ফাংশন হিসেবে ফেরত দিতে সক্ষম, যা পরে dispatch() ব্যবহার করে একশন ডিসপ্যাচ করে। এর মাধ্যমে, API কলের মতো কাজগুলো সহজভাবে পরিচালিত হয়। Redux Thunk অ্যাসিনক্রোনাস কাজের জন্য সাধারণ এবং জনপ্রিয় সমাধান হলেও, আরও জটিল সিজেন-ভিত্তিক লজিক পরিচালনার জন্য Redux Saga ব্যবহার করা হয়।